<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      // 数据驱动 ： 先操作数据，然后再渲染视图
      var usernameEle = document.querySelector("#username");
      var ageEle = document.querySelector("#age");
      var genderEle = document.querySelector("#gender");
      var addBtn = document.querySelector("#addBtn");
      var tbodyEle = document.querySelector("tbody");
      // 获取排序按钮
      var sortBtn = document.querySelector("#sortBtn");
      // onclick是元素对象的方法 ，不是数组方法；如果是伪数组 需要循环在绑定onclick方法
      var arr = [];
      sortBtn.onclick = () => {
        // console.log("点击了排序按钮");
        // 把数据做排序操作
        // 把arr 通过 age 来进行排序
        arr.sort((a, b) => a.age - b.age);
        // console.log("排序好的arr数据是:", arr);
        renderDom(arr);
      };

      addBtn.onclick = () => {
        var username = usernameEle.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        // 在点击的时候 创建一个 arr 对象数组出来
        arr.push({
          username: username,
          age: age,
          gender: gender,
        });
        console.log(arr);
        renderDom(arr);
      };

      // 能不能通过数据 显示对应的tr ；
      var renderDom = (data) => {
        // 每次渲染的时候把之前的tbody里的内容清空掉
        tbodyEle.innerHTML = "";

        data.forEach((item, key) => {
          // 根据数据创建tr标签
          var trEle = document.createElement("tr");
          // tr里的td内容就是 循环出来每一个对象里的内容信息
          trEle.innerHTML =
            "<td>" +
            item.username +
            "</td><td>" +
            item.age +
            "</td><td>" +
            item.gender +
            "</td><td class='del'>删除</td>";
          var delBtn = trEle.querySelector(".del");
          delBtn.onclick = () => {
            // console.log("点击了删除");
            // this.parentNode.remove();
            // 先删除数据里的内容 在渲染视图
            // console.log(key);
            arr.splice(key, 1);
            console.log(arr);
            renderDom(arr);
          };
          tbodyEle.appendChild(trEle);
        });
      };

      /*
      创建数组 arr

      每次点击addBtn后  都会将添加内容添加到数组里面
      添加完之后 执行循环函数

      建立循环函数
      0 将之前的函数输出的数据删除
      1 将所有添加的数据存在一个对象数组中
      2 遍历数组
      3 创建tr 将数组里面的对象内容放在tr中
      4 在此循环中获得所有删除按钮
      5 点击删除按钮 删除对象数组中的数组(不能删除祖先元素 会在之后的遍历中被重新输出)
      6 回调函数
          删除数组后 需要再重新遍历数组 讲数组里的内容输出
          将每个对象添加到tbody里面

      */
    </script>
  </body>
</html>
